
<template>
	<view class="staff" :style="css.page+'min-height:'+$xyfun.xysys().windowHeight+'px'" v-if="!isLoading">
		<view class="top p-50 flex" :style="css.mcbg">
			<view class="staff-info flex tc-w">
				<image class="headimage" :src="staffInfo.headimage" />
				<view class="m-l-15">
					<view class="tb m-t-10">{{staffInfo.realname}}</view>
					<view>{{staffInfo.mobile}}-{{staffInfo.store_info.name}}</view>
				</view>
			</view>
			<view class="home bc-w p-lr-25 flex m-l-auto" :style="css.tcmc" @tap="$xyfun.to('/pages/index')"><text class="xyicon icon-home m-r-10"></text>返回</view>
		</view>
		
		<view class="menu-list m-50 flex p-t-20 br-20" :style="css.mbg">
			<view class="item tc bc-w col-3 p-tb-40 br-20 tb" v-for="(item,index) in menuList" :key="index">
				<view v-if="item.url == 'scan'" @tap="scan()">
					<image :src="item.image" />
					<view class="m-tb-20">{{item.name}}</view>
				</view>
				<view @tap="$xyfun.to(item.url)" v-else>
					<image :src="item.image" />
					<view class="m-tb-20">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="time-range-picker">
		  <view class="picker-item">
		    <picker mode="date" :value="startDate" @change="onStartDateChange">
		      <view class="picker">{{ startDate }}</view>
		    </picker>
		  </view>
		  <text class="separator">至</text>
		  <view class="picker-item">
		    <picker mode="date" :value="endDate" @change="onEndDateChange">
		      <view class="picker">{{ endDate }}</view>
		    </picker>
		  </view>
		  <button class="query-btn" @click="fetchData">查询</button>
		</view>
			
		<!-- 统计卡片 -->
		<view class="stats-container">
		  <view class="stat-card">
		    <text class="stat-value">{{ orderCount }}</text>
		    <text class="stat-label">订单量</text>
		  </view>
		  <view class="stat-card">
		    <text class="stat-value">¥{{ totalAmount.toFixed(2) }}</text>
		    <text class="stat-label">订单总额</text>
		  </view>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				css:{},
				role:'staff',
				isLoading:true,
				staffInfo:{},
				menuList:[
					{name:'扫会员码',url:'scan',image:'/static/images/staff/menu0.png'},
					{name:'租赁订单',url:'/pages/staff/order/list',image:'/static/images/staff/menu3.png'},
					{name:'设备管理',url:'/pages/staff/device/list',image:'/static/images/staff/device.png'},
				],
			  startDate: this.getDate(-7), // 默认7天前
			  endDate: this.getDate(0),    // 默认今天
			  orderCount: 0,
			  totalAmount: 0
			}
		},
  mounted() {
    this.fetchData(); // 初始化加载数据
  },
		onLoad() {
			this.$xyfun.setNavBar();
			this.css = this.$xyfun.css();
			this.loadData();
		},
		methods: {
			
			loadData(){
					
				this.$api.post({
					url: '/staff/clerk/info',
					success: res => {
						this.isLoading = false;
						this.staffInfo = res;
						this.totalAmount = res.order_total;
						this.orderCount = res.order_count;
					},
					fail: res => {
						setTimeout(()=>{
							//uni.navigateBack();
						},3000)
					},
				});
				
			},
			
			//扫会员码
			scan(){
				
				var that = this;
				uni.scanCode({
					success: function (res) {
						if(res.scanType == 'QR_CODE' && res.result !=''){
							
							var result = res.result.split("_");
							var user_id = result.length ? result[0] : 0;
							
							if(user_id > 0){
								var curTime =Date.parse(new Date()) / 1000;
								var time = result[1];
								//if(curTime - time > 10*60){
									//that.$xyfun.msg('会员码已过期！');
								//}else{
								that.$xyfun.to('/pages/staff/user/info?user_id='+user_id);
								//}
							}else{
								that.$xyfun.msg('错误的会员码！');
							}
						}else{
							that.$xyfun.msg('错误的会员码！');
						}
					}
				});
			},
			// 获取日期字符串
			    getDate(offset) {
			      const date = new Date();
			      date.setDate(date.getDate() + offset);
			      const year = date.getFullYear();
			      const month = (date.getMonth() + 1).toString().padStart(2, '0');
			      const day = date.getDate().toString().padStart(2, '0');
			      return `${year}-${month}-${day}`;
			    },
			
			    // 开始时间变化
			    onStartDateChange(e) {
			      this.startDate = e.detail.value;
			    },
			
			    // 结束时间变化
			    onEndDateChange(e) {
			      this.endDate = e.detail.value;
			    },
			
			    // 模拟数据获取
			    fetchData() {
			      // 这里应该是实际的API请求
			      // 以下是模拟数据
			      uni.showLoading({
			        title: '加载中...'
			      });
			      
			      setTimeout(() => {
			        this.$api.post({
			        	url: '/staff/clerk/info',
			        	data: {
			        		start_time: this.startDate,
			        		end_time: this.endDate
			        	},
			        	success: res => {
			        		this.isLoading = false;
			        		// this.staffInfo = res;
			        		this.totalAmount = res.order_total;
							this.orderCount = res.order_count;
			        	},
			        	fail: res => {
			        		setTimeout(()=>{
			        			//uni.navigateBack();
			        		},3000)
			        	},
			        })
			        uni.hideLoading();
			        uni.showToast({
			          title: '数据已更新',
			          icon: 'success'
			        });
			      }, 800);
				  
			    },
			
			    // 计算日期差
			    calcDateDiff() {
			      const start = new Date(this.startDate);
			      const end = new Date(this.endDate);
			      const diffTime = Math.abs(end - start);
			      return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
			    }
				
		}
	}
</script>

<style scoped lang="scss">
	.staff{
		
		.top{
			.staff-info{
				.headimage{width: 100rpx;height: 100rpx;border-radius: 50rpx;}
			}
			.home{height: 54rpx;border-radius: 27rpx;line-height: 54rpx;margin-top: 23rpx;}
		}
		
		.menu-list{
			image{width: 100rpx;height: 100rpx;}
		}
		
	}
</style>
<style scoped>
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}

.time-range-picker {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx;
  margin: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  flex-wrap: wrap;
}

.picker-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.picker {
  background-color: #f9f9f9;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  color: #333;
  font-size: 30rpx;
}

.separator {
  margin: 0 20rpx;
  color: #999;
  font-size: 28rpx;
}

.query-btn {
  background-color: #007aff;
  color: white;
  font-size: 28rpx;
  padding: 0 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 10rpx;
  margin-left: 20rpx;
}

.stats-container {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.stat-card {
  flex: 1;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 20rpx;
  padding: 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  box-shadow: 0 10rpx 20rpx rgba(37, 117, 252, 0.3);
  margin: 0 15rpx;
}

.stat-card:first-child {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  box-shadow: 0 10rpx 20rpx rgba(255, 154, 158, 0.3);
}

.stat-value {
  font-size: 60rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.stat-label {
  font-size: 30rpx;
  opacity: 0.9;
}
</style>